---
type: tutorial
title: 레이아웃을 결합하여 두 가지 장점을 모두 활용하세요
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 — 블로그 게시물 형식을 지정하는 레이아웃에 기본 페이지 레이아웃을 추가하세요.
i18nReady: true
---

import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

이제 각 블로그 게시물에 레이아웃을 추가했으므로 게시물을 웹 사이트의 나머지 페이지와 비슷하게 만들 차례입니다!

<PreCheck>
  - 기본 페이지 레이아웃 안에 블로그 게시물 레이아웃을 중첩하세요.
</PreCheck>

## 두 레이아웃 중첩

페이지의 전체 레이아웃을 정의하기 위한 `BaseLayout.astro`가 이미 있습니다.

`MarkdownPostLayout.astro`는 `title` 및 `date`와 같은 일반적인 블로그 게시물 속성에 대한 몇 가지 추가 템플릿을 제공하지만 블로그 게시물은 사이트의 다른 페이지와 모양이 다릅니다. **레이아웃 중첩**을 통해 블로그 게시물의 모양을 사이트의 나머지 부분과 일치시킬 수 있습니다.

<Steps>
1. `src/layouts/MarkdownPostLayout.astro`에서 `BaseLayout.astro`를 가져와 이를 사용하여 전체 템플릿 콘텐츠를 래핑합니다. `pageTitle` prop을 전달하는 것을 잊지 마세요:

    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={2,5,12}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Written by: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

2. `http://localhost:4321/posts/post-1`에서 브라우저 미리보기를 확인하세요. 이제 다음과 같이 렌더링된 콘텐츠가 표시됩니다.

    - 스타일, 탐색 링크, 소셜 바닥글을 포함한 **메인 페이지 레이아웃**.
    - 설명, 날짜, 제목, 이미지와 같은 프런트매터 속성을 포함한 **블로그 게시물 레이아웃**.
    - 여러분의 **개별 블로그 게시물 Markdown 콘텐츠** (이 게시물에 작성된 텍스트만 포함).

3. 이제 페이지 제목이 각 레이아웃별로 한 번씩, 두 번 표시됩니다.

    `MarkdownPostLayout.astro`에서 페이지 제목을 표시하는 줄을 제거합니다.

    ```astro title="src/layouts/MarkdownPostLayout.astro" del={2}
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Written by: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

4. `http://localhost:4321/posts/post-1`에서 브라우저 미리보기를 다시 확인하고 이 줄이 더 이상 표시되지 않고 제목이 한 번만 표시되는지 확인하세요. 중복된 콘텐츠가 없는지 확인하기 위해 필요한 다른 조정을 수행합니다.
</Steps>

  다음 사항을 확인하세요.

    - 각 블로그 게시물은 동일한 페이지 템플릿을 표시하며 누락된 콘텐츠가 없습니다. (블로그 게시물 중 하나에 콘텐츠가 누락된 경우 해당 게시물의 프런트매터 속성을 확인하세요.)

    - 한 페이지에 내용이 중복되지 않습니다. (어떤 것이 두 번 렌더링되는 경우 `MarkdownPostLayout.astro`에서 제거해야 합니다.)

    페이지 템플릿을 사용자 정의하려면 그렇게 할 수 있습니다.

<Box icon="question-mark">

### 지식 테스트

1. 무엇을 통해 하나의 레이아웃을 다른 레이아웃 안에 중첩하고 모듈식 작업을 활용할 수 있습니까?

    <MultipleChoice>
      <Option>
        지속적인 배포
      </Option>
      <Option>
        반응형 디자인
      </Option>
      <Option isCorrect>
        컴포넌트 기반 설계
      </Option>
    </MultipleChoice>

2. 다중 레이아웃은 Markdown 페이지가 포함된 프로젝트에 특히 유용합니다. 다음 중 이에 해당하는 것은 무엇입니까?

    <MultipleChoice>
      <Option isCorrect>
        블로그
      </Option>
      <Option>
        대시보드
      </Option>
      <Option>
        채팅 앱
      </Option>
    </MultipleChoice>

3. 다음 중 모든 페이지에 템플릿을 제공하는 것은 무엇입니까?

    <MultipleChoice>
      <Option>
        `index.astro`
      </Option>
      <Option isCorrect>
        `BaseLayout.astro`
      </Option>
      <Option>
        `post-1.md`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## 체크리스트

<Checklist>
- [ ] 레이아웃을 중첩하여 중복된 요소가 있는지 확인할 수 있습니다.
</Checklist>
</Box>

### 참고 자료

- [Astro의 중첩 레이아웃](/ko/basics/layouts/#중첩-레이아웃)